<template>
  <div class="homeBox">
    <!-- 搜索 -->
     <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <van-button class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        to="/search">搜索</van-button>
    </van-nav-bar>
    <!-- 轮播图 -->
    <Banner></Banner>
    <!-- 推荐音乐 -->
    <list-title>推荐音乐</list-title>
      <!-- 图片列表项 -->
     <ul class="imgList">
      <img-item
        v-for="song in recommendSongs"
        :key="song.id"
        :song="song"
        path = "/playlist"
      ></img-item>
    </ul>
    <list-title>最新音乐</list-title>
    <music-list :newSongs="newSongs" @play="play"></music-list>

    <!-- 推荐音乐 -->
    <list-title>推荐MV</list-title>
    <RecmList :recomList="mvList"></RecmList>
    <!-- 播放button组件 -->

  </div>
</template>

<script>

import ListTitle from '@/components/Recommend/list-title.vue'
import ImgItem from '@/components/Recommend/img-item.vue'
import Banner from '@/components/Banner.vue'
import { getNewsMusic } from '@/api/recommend.js'
import MusicList from '../components/music-list/music-list.vue'
import RecmList from '@/components/RecmList.vue'
import { mapMutations, mapState } from 'vuex'

export default {
  data () {
    return {

      recommendSongs: [], // 推荐歌单数据
      newSongs: [], // 最新音乐
      isShowTab: true,
      recomList: [],
      mvList: []
    }
  },
  computed: {
    ...mapState(['currentId'])

  },
  created () {
    this.getRecommendSongs()
    this.getNewSongs()
    this.getShowTab(this.isShowTab)
    this.getRecomMV()
  },
  methods: {
    ...mapMutations(['getCurrentMusic', 'getShowTab']),
    // 推荐音乐
    async getRecommendSongs () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      // const { data: res } = await getRecommendM({
      //   limit: 6
      // })
      const { data: res } = await this.$http.get('/personalized', {
        params: {
          limit: 6
        }
      })
      this.recommendSongs = res.result
      console.log(res.result)
      this.$toast.clear()
    },
    // 最新音乐
    async  getNewSongs () {
      try {
        const { data: res } = await getNewsMusic({
          limit: 10
        })
        console.log(res.result)
        this.newSongs = res.result
      } catch (err) {
        return err
      }
    },

    async getRecomMV () {
      // const {
      //   data: { result: result }
      // }
      let {
        data: { data: result }
      } = await this.$http.get('/mv/first?limit=9')
      // const res = await this.$http.get('/personalized?limit=6');
      // console.log('result', result);
      result = result.map(val => {
        return (val = {
          mv: true,
          picUrl: val.cover,
          id: val.id,
          playCount: val.playCount,
          name: val.name
        })
      })

      this.mvList = result
      console.log('mvList=>', this.mvList)
    },

    // 播放当前音乐
    play (e) {
      console.log(e)
      this.getCurrentMusic(e)
    }

  },
  components: {
    ListTitle,
    ImgItem,
    MusicList,
    Banner,
    RecmList

  }
}
</script>

<style lang="less" scoped>
.homeBox{
  margin-bottom: 100px;
  position: relative;
}
.search{
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #ccc;
  }
.imgList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-nav-bar{
  position: sticky;
  top: 0;
  background-color: #4a4a4a;
  z-index: 4;
  /deep/ .van-nav-bar__title {
    max-width:unset;
  }
  .search-btn {
    width: 300px;
    background-color: rgb(226, 200, 200);
    border: none;
    font-size: 22px;

    .van-icon {
      font-size: 16px;
      color: rgb(255, 247, 247);
    }
    .van-button__text{
      font-size: 16px;
    }
  }
}

</style>
